<script setup>
import {RouterView} from 'vue-router'
import {Setting} from "@element-plus/icons-vue";


const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>代码生成器</el-header>
      <el-container>
        <el-aside width="400px">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >
                <el-menu-item index="1">
                  <el-icon>
                    <setting/>
                  </el-icon>
                  <router-link to="/modelList">模板集合列表</router-link>
                </el-menu-item>
<!--                <el-menu-item index="2">-->
<!--                  <el-icon>-->
<!--                    <setting/>-->
<!--                  </el-icon>-->
<!--                  <router-link to="/templateList">模板文件管理</router-link>-->
<!--                </el-menu-item>-->
<!--                <el-menu-item index="3">-->
<!--                  <el-icon>-->
<!--                    <setting/>-->
<!--                  </el-icon>-->
<!--                  <router-link to="/templateVarList">模板变量管理</router-link>-->
<!--                </el-menu-item>-->
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <RouterView/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
/* 去掉链接的下划线和设置颜色 */
a {
  text-decoration: none; /* 去掉下划线 */
  color: black; /* 设置链接颜色为白色 */
}

/* 设置点击后的样式 */
router-link-active {
  text-decoration: none; /* 去掉下划线 */
  color: yellow; /* 设置点击后的颜色为黄色 */
}
</style>
